let goodsList = [
    {
        picture: 'https://yanxuan-item.nosdn.127.net/6a3851ce1d75f1f5c9583f0fb5a1636e.png',
        name: '网易云音乐真无线蓝牙耳机Lite版',
        consty: '蓝牙5.0低功耗20小时续航；三频均衡，干净音质；IPX5防水设计，纳米涂层；陶瓷天线，信号更强大',
        price: '149.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/d2c97321492dbcb859726e2f01c3f2b8.jpg',
        name: '还原猫咪排泄天性，加拿大膨润土砂6千克',
        consty: '进口矿砂，强力除臭凝结',
        price: '59.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
        name: '茶水分离杯耐热隔热玻璃杯',
        consty: '茶水分隔茶汤浓度可控',
        price: '99.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/c520bba8209bae877158e8810d889aca.png',
        name: '分场景使用不污染，超细纤维抹布分类5件套',
        consty: '精细分工，洁净家居',
        price: '19.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/18e583e27a7cd9f2fb25eca0507936db.png',
        name: '女式羊反绒流苏装饰轻便乐福鞋',
        consty: '轻灵流苏，自由穿脱',
        price: '179.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/6b02ad3065740730aaf20b4fbddfa769.png',
        name: '饭后一张远离老油污，厨房除油污清洁湿巾',
        consty: '40片/包，高效去油污',
        price: '9.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/80e56ca4c8536136e3532101e278bcea.png',
        name: '女式方扣中跟乐福鞋',
        consty: '柔软真皮两穿设计，4.5cm恰好高度',
        price: '302.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/eb46a941dfa337c6d9569385f5fb3c8e.png',
        name: '清洁除菌二合一，蓝泡泡马桶清洁剂50g*4',
        consty: '除味除菌，如厕好心情',
        price: '17.80'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/e82a55331662629e5ed0b932a9d286be.jpg',
        name: '全蟹熬制，拌面小能手，满满蟹粉200g*1罐',
        consty: '活蟹鲜拆，主厨配方',
        price: '125.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/c28641dbf14645f518ee01df668daca7.png',
        name: '酸爽酸菜鱼，麻香藤椒虾手工水饺360g',
        consty: '严选食材，汤汁浓郁，两种口味吃不够',
        price: '19.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/55284fa1d8773b8897efa0b2284a8437.png',
        name: '‘嗖’一下就通了日本管道毛发溶解剂',
        consty: '溶解管道毛发，疏通除味清洁',
        price: '9.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/d9d030cbd2d3516a20cc616f728876e1.jpg',
        name: '无谷慕斯罐头（猫）170克*12罐',
        consty: '蓝牙5.0低功耗20小时续航；三频均衡，干净音质；IPX5防水设计，纳米涂层；陶瓷天线，信号更强大',
        price: '132.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/816acb46e52e098acbee81b37fcd9944.png',
        name: '24寸全铝镁合金拉杆箱',
        consty: '铝镁合金，不怕磕碰省心出行',
        price: '719.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/487cba1e2f2b3902cb6f9e97bb8fb013.png',
        name: '超细纤维擦车厨房多用清洁抹布',
        consty: '超细纤维，清洁加倍不伤车身',
        price: '21.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/4d825431a3587edb63cb165166f8fc76.jpg',
        name: '云音乐定制IN系列intar民谣木吉他',
        consty: '云音乐2020in系列全新设计intar民谣木吉他',
        price: '589.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/07dee4b72938cb420234a0535ae1643d.png',
        name: '时尚百搭，儿童雪尼尔毛衣3-9岁',
        consty: '柔软舒适毛衣，秋冬常备单品',
        price: '109.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/fa1302d4b51225df3a59727c705508de.jpg',
        name: '双味千层，美味随时享，手抓饼烤肉组合',
        consty: '有饼有肉，喷香美味随时享',
        price: '9.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/0f8a4dc8ff30b6f5365595d244ac4d42.png',
        name: '仙女的法式浪漫梦想Wedgwood水晶香槟对杯',
        consty: '著名婚纱设计师联名皇室御用品牌',
        price: '630.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/87b3d721a4d51055d60f347660ec4b78.png',
        name: '一擦即白，纳米清洁多用擦4片装',
        consty: '物理摩擦，轻松去污',
        price: '9.90'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/1a7308e375caf2288e60f94e87771ee8.png',
        name: '网易云音乐氧气立体声蓝牙头戴式触控耳机',
        consty: '智能红心键，一键交互云音乐app；高通蓝牙5.0强信号，aptX无损音质体验；26小时长续航；Hi-res专业高解析认证；极简滑触设计，柔软亲肤蛋白皮耳罩，佩戴舒适',
        price: '459.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/c3b4e3640f77bb72ec4d043ef2e2a0cd.png',
        name: '不落平庸设计，儿童趣味提花毛衣1-9岁',
        consty: '童趣提花，活力俏皮',
        price: '129.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/b76a141993c6f4e27a0a522479ff7165.jpg',
        name: '全面助力发育，全价幼猫粮500克',
        consty: '营养易吸收，严苛选料，健康成长',
        price: '29.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/9188902ddb1f0bd6891c09a4fea30973.png',
        name: '泡茶煮茶功能多智能保温煮茶壶',
        consty: '为一泡好茶而生',
        price: '249.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/50db51cb0a25b0d346ce62b22b5e0f92.png',
        name: '拼色更童趣，儿童撞色T恤110-160cm',
        consty: '磨毛全棉，触感暖意立显',
        price: '79.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
        name: '意大利制造双面拼色毛衣2色可选',
        consty: '意大利gucci纱线原创设计',
        price: '999.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/6d8d6772df51fa60c2e899a16ac34718.png',
        name: '90%白鸭绒，儿童棒球领轻薄羽绒服73-140cm',
        consty: '儿童棒球轻羽绒外套，保暖常备单品',
        price: '139.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/ea1ec719c9a860eedb0cb7ef31ada4af.png',
        name: '秋冬也自带活力感，儿童圆领套头卫衣1-9岁',
        consty: '百搭色系，丰富花色设计',
        price: '99.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/7465ac5703eeed4a2a2ff0352de3c486.jpg',
        name: '送给男生的运动礼盒，蓝牙耳机+智能随行杯',
        consty: '内含保温随行杯+X3Plus蓝牙HiFi耳机',
        price: '328.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/6ede0ef5cda2a9425713e4fc7f6cc604.png',
        name: '圣诞节战服，婴童外穿夹棉外出服1-2岁',
        consty: '蓝牙5.0低功耗20小时续航；三频均衡，干净音质；IPX5防水设计，纳米涂层；陶瓷天线，信号更强大',
        price: '189.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg',
        name: '浓浓肉香训犬搭配，阿根廷牛肉粒180克',
        consty: '精选牛肉，拌粮训犬新选择',
        price: '22.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/680506369180fd95d6dd0a0c3630c3da.png',
        name: '网易云音乐车载蓝牙播放器快充版',
        consty: '【经典升级】双口USB输出；充电安全保护；支持MIC；蓝牙免提，一键通话；多功能旋转按钮，简便操作',
        price: '99.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/ac6adfe88506f5fa533cbca2b1074d9f.png',
        name: '轻暖可收纳，儿童带帽轻薄羽绒服4-13岁',
        consty: '90%白鸭绒填充，110-160cm',
        price: '299.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/72faaaa2788793de829914ce7295fb0b.png',
        name: '茗家私享大红袍紫砂壶宜兴紫砂西施壶潘壶',
        consty: '紫砂朱泥贵族，经典泡茶利器',
        price: '499.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/cc1c57b701f202bc585d8fff3b65571e.png',
        name: '意外设计便携钢笔花信礼盒',
        consty: '生活的美，诗人的心 4.16-4.19号停止发货',
        price: '398.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/0412886f26ae746c6a6381fb68a4ac37.png',
        name: '大容量干湿分类，脚踏缓降静音垃圾桶',
        consty: '一踩开合，解放双手',
        price: '89.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/a24be36ee78dc18bbbf52c42910b5f69.png',
        name: '小胖墩单手可拎20寸纯PC拉链拉杆箱',
        consty: '小巧女生可手提，51升轻松出行',
        price: '187.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/82a3da73b15fcd6be9532e000fe7fa3d.png',
        name: '英伦20寸纯PC横纹登机箱',
        consty: '小巧尺寸40升轻松出行',
        price: '369.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/f3673ff93b75a9135d80b11f86ba0dd1.png',
        name: '陪伴你每一次出行，20寸全铝镁合金登机箱',
        consty: '铝镁合金，抗暴力冲撞',
        price: '639.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/21d2e9b754487aa3030ce105493a9473.jpg',
        name: '加绒加厚，儿童保暖时尚卫衣套装73-120cm',
        consty: '舒棉绒内里，抵御寒冬',
        price: '199.00'
    },
    {
        picture: 'https://yanxuan-item.nosdn.127.net/bfb1b8d93a34205bfa9f2f8e64150b24.png',
        name: '无惧踩泥涉水，男式牛皮工装切尔西靴',
        consty: '蓝牙5.0低功耗20小时续航；三频均衡，干净音质；IPX5防水设计，纳米涂层',
        price: '390.00'
    },
]
const list = document.querySelector('.nav-s')
function fn() {
    list.innerHTML = goodsList.map(item => {
        return ` <a href="file:///C:/Users/86133/Desktop/%E4%B8%89%E4%BA%BA%E5%90%88%E6%88%90/details.html">
        <div class="items">
      <img src="${item.picture}" alt="">
      <p class="nemm ellipsis">${item.name}</p>
      <p class="puss ellipsis">${item.consty}</p>
      <p class="pres">¥${item.price}</p>
    </div></a>`
    }).join('')
}
fn(goodsList)
const tops = document.querySelector('.tops')
tops.addEventListener('click', function (e) {
    if (e.target.tagName === 'BUTTON') {
        if (e.target.dataset.index === '1') {
            document.querySelector('.tops button.actue')?.classList.remove('actue')
            e.target.classList.add('actue')
        }
        fn(goodsList)
    }
})
const righ = document.querySelector('.righ')

righ.addEventListener('click', function (e) {
    if (e.target.tagName === 'INPUT') {
        fn(goodsList)
    }

})
let flag = true
document.querySelector('.righ input:nth-of-type(2)').addEventListener('click', function () {
    if (flag) {
        list.style.display = 'none'
        document.querySelector('.itemsd').style.opacity = '1'
        flag = false
    } else {
        list.style.display = 'flex'
        document.querySelector('.itemsd').style.opacity = '0'
        flag = true
    }
})

fn(goodsList)

// const lesta = document.querySelector('.lefts a')
// const lestaA = document.querySelectorAll('.lefts> a')
// console.log(typeof (Object.values(lestaA)));
// let arr = []
// for (let i in lestaA) {
//     console.log(arr.push(i));
// }
// arr[1].addEventListener('click', function (e) {
//     if (e.target.tagName === 'A') {
//         console.log(e.target);
//         document.querySelector('.lefts a.active').classList.remove('active')
//         e.target.classList.add('active')
//     }
// }
// )
// for (let i = 0; i < lesta.length; i++) {
//     lesta.addEventListener('click', function (e) {
//         if (e.target.tagName === 'A') {
//             console.log(e.target);
//             e.target.classList.remove('active')
//             e.target.classList.add('active')
//         }
//     }
//     )
// }

// 商品价格排序
// 为每个商品对象添加 priceNum 属性
goodsList.forEach(item => {
    item.priceNum = parseFloat(item.price.slice(1))
})

// 定义排序函数
function sortByPrice(goodsList, isAscending) {
    goodsList.sort((item1, item2) => {
        if (isAscending) {
            return item1.priceNum - item2.priceNum
        } else {
            return item2.priceNum - item1.priceNum
        }
    })
}
// 点击 up 和 down 时重新渲染并排序
document.querySelector('.up').addEventListener('click', () => {
    sortByPrice(goodsList, true)
    fn(goodsList)
})

document.querySelector('.down').addEventListener('click', () => {
    sortByPrice(goodsList, false)
    fn(goodsList)
})
